<template>
    <div>
        <el-container>
            <el-header>
                <el-input placeholder="请输入要搜索的仓库名称或地址 ">
                </el-input>
                <el-select placeholder="请选择管理员">
                    <el-option></el-option>
                </el-select>
                <el-button icon="search" type="primary" @click="search">搜索</el-button>
            </el-header>
            <el-main>
                <div class="en">
                    <el-button type="primary">添加</el-button>
                    <el-button type="danger">删除</el-button>
                </div>
                <el-table :data="data" border v-loading="loading">
                    <el-table-column label="Id" prop="Id" width="100px" />
                    <el-table-column label="仓库名称" prop="Name" />
                    <el-table-column label="仓库地址" prop="Address" />
                    <el-table-column label="管理员" prop="ManageName" />
                    <el-table-column label="仓库联系电话" prop="Mobile" />
                    <el-table-column label="操作" align="center" width="300px" fixed="right">
                        <template #default="scope">
                            <el-button type="warning" @click="dialogedit(scope.row)">编辑</el-button>
                            <el-popconfirm title="你确定要删除吗？" confirm-button-text="确定" cancel-button-text="取消"
                                icon="opportunity" icon-color="#fff100" width="160px" @confirm="delrow(scope.row.Id)">
                                <template #reference>
                                    <el-button type="danger">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import connect from '../untils/require'
import { ElNotification, ElLoading } from 'element-plus'
let data = reactive([]);
let loading = ref(true)
// 加载数据
function loadData() {
    loading.value = true
    connect.get('warehouse', { params: pageModel })
        .then(resp => {
            data.splice(0)//清空数据
            data.push(...resp.Data.List)//后加载数据
            loading.value = false
            total.value = resp.Data.Total
        })
}
// 搜索功能
function search() {
    pageModel.pageIndex = 1
    loadData()

}
</script>
<style scoped>
.el-header {
    position: relative;
    height: 100px;
    border: solid 1px black;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* 搜索信息文字 */
.el-header::after {
    width: 90px;
    height: 20px;
    position: absolute;
    top: -10px;
    left: 20px;
    content: "搜索条件";
    text-align: center;
    background-color: #a67eb7;
}

.el-header .el-input {
    width: 250px;
    height: 30px;
    margin-right: 20px;
}

.el-main {
    border: black solid 1px
}

.el-main .en {
    padding: 10px 0px;
}
</style>